<template>
  <div>
    <div class="key-project" v-if="!isEdit && !isDetail">
      <div class="top">
        <div v-for="item in topData" :key="item.name" :style="{ background: item.bgColor }" class="item">
          <div class="left">
            <img style="width: 36px; height: 36px" :src="item.img" alt="img" />
          </div>
          <div class="right">
            <span style="color: #1C1C28;font-weight: bold;font-size: 18px;">{{ item.name }}</span>
            <span :style="{ color: item.color, fontSize: '30px', margin: '0 5px', fontWeight: 'bold' }">{{ item.count
            }}</span>
            <span style="color: #999;font-size: 16px;">个</span>
          </div>
        </div>
      </div>
      <div class="form">
        <el-form size="small" :model="searchForm" :inline="true" ref="searchForm" style="width: 100%" label-width="80px">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="searchForm.projectName" placeholder="请输入" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="牵头部门" prop="leadingDepartment">
            <el-input v-model="searchForm.leadingDepartment" placeholder="请输入" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="包联领导" prop="projectLeader" style="margin-right: 0;">
            <el-input v-model="searchForm.projectLeader" placeholder="请输入" class="input-width"></el-input>
          </el-form-item>
          <el-divider direction="vertical"></el-divider>
          <el-form-item style="margin-right: 0;">
            <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit('searchForm')"
              style="width: 90px;">查询
            </el-button>
            <el-button type="info" size="small" icon="el-icon-refresh-left" @click="onReset('searchForm')"
              style="width: 90px;">重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="center-btn">
        <span>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="onAdd">新增项目</el-button>
          <el-button size="small" type="danger" icon="el-icon-top" @click="onDataExport">数据导出</el-button>
        </span>
        <div class="tab">
          <div v-for="item in tabs2" :key="item.name" class="item" :class="activeTab === item.name && 'active-item'"
            @click="switchTab(item.name)">
            <img style="width: 18px;" :src="activeTab === item.name ? item.imgS : item.img" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="table-content" ref="tableRef">
        <el-table v-if="activeTab === '项目表'" :data="tableData" v-loading="loading" stripe size="small"
          style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
          :height="tableHeight" :header-cell-style="headerRowStyle">
          <el-table-column type="index" label="序号" align="center" width="50">
          </el-table-column>
          <el-table-column prop="projectName" align="center" label="项目名称" width="100">
          </el-table-column>
          <el-table-column prop="projectLeader" label="包联领导" align="center" width="100">
          </el-table-column>
          <el-table-column prop="leadingDepartment" label="牵头部门" align="center" width="100">
          </el-table-column>
          <el-table-column prop="projectIntroduce" label="项目介绍" align="center">
          </el-table-column>
          <el-table-column prop="projectProgress" label="项目进展" align="center">
          </el-table-column>
          <el-table-column prop="cloggingPoint" label="当前堵点" align="center" width="100">
          </el-table-column>
          <el-table-column prop="advanceRequirement" label="推进要求" align="center" width="100">
          </el-table-column>
          <el-table-column prop="responsibleDepartment" label="责任部门" align="center" width="100">
          </el-table-column>
          <el-table-column prop="deadlineCompletion" label="完成时限" align="center" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClickRow(scope.row, 'detail')" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="handleClickRow(scope.row, 'edit')">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <flowChart v-else :curData="flowData" :tableHeight="tableHeight" :headerRowStyle="headerRowStyle"></flowChart>
      </div>
      <div class="page-bottom-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" layout="prev, pager, next, jumper" :total="total" background>
        </el-pagination>
        <div v-if="activeTab === '流程图'" class="flow-chart-info">
          <span style="font-weight: bold; padding-right: 5px">图例:</span>
          <div v-for="item in legendData" class="item" :key="item.name">
            <circleTemp :color="item.color"></circleTemp>
            <span style="margin-left: 5px">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <keyProjectTemp v-if="isEdit" :curId="curId" @switchDom="switchDom"></keyProjectTemp>
    <keyProjectDetail v-if="isDetail" :curId="curId" @onDetailBack="onDetailBack" @onProjectEdit="onProjectEdit">
    </keyProjectDetail>
  </div>
</template>

<script>
import img1 from "@img/project/icon-czdddxm.png";
import img2 from "@img/project/icon-jzsldxm.png";
import img3 from "@img/project/icon-zdxm1.png";
import imgL from "@img/project/icon-xmb.png";
import imgLS from "@img/project/icon-xmb-select.png";
import imgR from "@img/project/icon-lct.png";
import imgRS from "@img/project/icon-lct-select.png";
import circleTemp from "./common/circleTemp.vue";
import keyProjectTemp from "./common/keyProjectTemp.vue";
import keyProjectDetail from "./common/keyProjectDetail.vue";
import flowChart from "./common/flowChart.vue";
import downFile from "@api/projectManaApi/download";
import {
  keyProjectStatistics,
  keyProjectList,
  keyProjectFlowChart,
  keyProjectExport,
} from "@api/projectManaApi";

export default {
  components: { circleTemp, keyProjectTemp, flowChart, keyProjectDetail },
  data() {
    return {
      topData: [],
      searchForm: {
        projectName: "",
        leadingDepartment: "",
        projectLeader: "",
      },
      tableData: [],
      tableHeight: document.body.clientHeight - 450,
      tabs2: [
        {
          name: "项目表",
          img: imgL,
          imgS: imgLS
        },
        {
          name: "流程图",
          img: imgR,
          imgS: imgRS
        },
      ],
      activeTab: "项目表",
      legendData: [
        { color: "#4D82FF", name: "已完成" },
        { color: "#0DC807", name: "顺利推进" },
        { color: "#FF1E1E", name: "遇到堵点" },
        { color: "#B8B8B8", name: "未开始" },
      ],
      curTitle: "",
      tableRef: null,
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10, // 每页
      pageNum: 0, // 当前
      flowData: [],
      isEdit: false,
      isDetail: false,
      curId: null,
    };
  },
  mounted() {
    this.initSize();
    this.initStatistics();
    this.initData();
    window.addEventListener("resize", this.initSize);
  },
  methods: {
    onDetailBack() {
      this.isDetail = false;
    },
    // 详情点击项目编辑
    onProjectEdit(id) {
      this.curId = id;
      this.isDetail = false;
      this.isEdit = true;
    },
    // 详情或编辑
    handleClickRow(row, type) {
      this.curId = row.id;
      if (type === "edit") {
        this.isEdit = true;
        this.isDetail = false;
      }
      if (type === "detail") {
        this.isEdit = false;
        this.isDetail = true;
      }
    },
    // 表头
    headerRowStyle() {
      return "color: #1C1C28;background:#F2F3F5";
    },
    // 获取统计数据
    async initStatistics() {
      // FFEFE5
      const colors = ["#21BB7E", "#FF7700", "#FF0000"];
      const bgColors = ["#EBF9EF", "#FFEFE5", "#FFEEEE"];
      const imgs = [img2, img1, img3];
      const res = await keyProjectStatistics();
      if (res && res.length > 0) {
        this.topData = res.map((item, index) => {
          item.color = colors[index];
          item.bgColor = bgColors[index];
          item.img = imgs[index];
          return item;
        });
      }
    },
    // 获取table数据
    async initData() {
      this.loading = true;
      const params = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      const res = await keyProjectList(params);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 尺寸设置
    initSize() {
      this.tableHeight = document.body.clientHeight - 450;
    },
    // search
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.switchGetData();
      });
    },
    // reset
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.switchGetData();
    },
    switchGetData() {
      const actions = {
        项目表: this.initData,
        default: this.getFlowChart,
      };
      (actions[this.activeTab] || actions.default)();
    },
    // 显示切换
    switchTab(name) {
      this.activeTab = name;
      this.switchGetData();
    },
    // 获取流程列表
    async getFlowChart() {
      this.loading = true;
      const params = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      const res = await keyProjectFlowChart(params);
      if (res.code === 200) {
        this.flowData = res.rows;
        this.total = res.total;
        this.loading = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // add new project
    onAdd() {
      this.curTitle = "新增项目";
      this.curId = null;
      this.isEdit = true;
      this.isDetail = false;
    },
    switchDom(type) {
      if (type) {
        if (this.activeTab === "项目表") {
          this.initData();
        } else {
          this.getFlowChart();
        }
      }
      this.curId = null;
      this.isEdit = false;
    },
    // 数据导出
    async onDataExport() {
      const res = await keyProjectExport();
      downFile.excel(res, "重点项目");
      this.$message.success("导出成功");
    },
    // 每页
    handleSizeChange(val) {
      this.pageSize = val;
      this.switchGetData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.switchGetData();
    },
  },
};
</script>

<style scoped lang="less">
.top {
  display: grid;
  align-items: center;
  width: 100%;
  grid-template-columns: repeat(3, 350px);
  grid-column-gap: 20px;

  .item {
    width: 100%;
    height: 68px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;

    .right {
      display: flex;
      align-items: center;
      margin-left: 10px;
    }
  }
}

.form {
  margin: 20px 0 10px 0;
  width: 100%;

  form {
    display: flex;
    align-items: center;
  }

  /deep/.el-divider--vertical {
    margin: 0 20px;
  }

  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}

.center-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  margin-bottom: 20px;

  .tab {
    width: 242px;
    height: 48px;
    background: #efeff0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;

    .item {
      flex: 1;
      height: 100%;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        padding-left: 5px;
      }

      :hover {
        cursor: pointer;
      }
    }

    .active-item {
      background: #fff;
      color: #0063f7;
    }
  }
}

.table-content {
  position: relative;
  width: 100%;
}

.flow-chart-info {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  height: 70px;
  top: 0;

  .item {
    display: flex;
    align-items: center;
    margin-left: 10px;
  }
}

.input-width {
  width: 230px;
}

@media screen and(max-width: 1460px) {
  .form {
    /deep/.el-divider--vertical {
      margin: 0 10px;
    }
  }

  .input-width {
    width: 215px;
  }
}

@media screen and(max-width: 1366px) {

  .input-width {
    width: 190px;
  }
}
</style>